<div class="bg-primary text-white py-4">
    <div class="container">
        <h1>Knowledge Center</h1>
        <p class="col-md-7 pl-0">Sustainalytics’ Thematic Research team regularly produces a wide variety of research publications, including ESG spotlights, sector reports, thematic research and commissioned studies.</p>
    </div>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-3">
            <ul class="list-group list-group-flush">
                <li class="list-group-item item-link knowledge-center-menu-item" [routerLink]="['/knowledge-center', 'news']" [ngClass]="{'active': section === 'news'}">
                    News
                </li>
                <li class="list-group-item item-link knowledge-center-menu-item" [routerLink]="['/knowledge-center', 'spotlight']" [ngClass]="{'active': section === 'spotlight'}">
                    Spotlight
                </li>
                <li class="list-group-item item-link knowledge-center-menu-item" [routerLink]="['/knowledge-center', 'events']" [ngClass]="{'active': section === 'events'}">
                    Events
                </li>
            </ul>
        </div>
        <div class="col-md-9">
            <app-news-list *ngIf="insights && insights.length > 0" [insights]="insights"></app-news-list>
            <app-spotlights-list *ngIf="spotlights && spotlights.length > 0" [spotlights]="spotlights"></app-spotlights-list>
            <app-events-list *ngIf="events && events.length > 0" [events]="events"></app-events-list>
        </div>
    </div>
</div>
